<script setup lang="ts">
import { ref } from 'vue'
import prettyBytes from 'pretty-bytes';
import { IconSettings, IconSync } from '@arco-design/web-vue/es/icon';
const data: any = ref({})
window.ipcRenderer.on("projects", (_: any, res: any) => {
    let items: any = res.packages || {};
    let projects: any = {};
    for (let i in items) {
        items[i].keywords = items[i].keywords || []
        if (items[i].keywords.length > 0) {
            let keyword = items[i].keywords[0]
            if (!projects[keyword]) {
                projects[keyword] = { title: keyword, children: [] }
            }
            projects[keyword].children.push(items[i])
        }
    }
    data.value = projects
})
window.ipcRenderer.send("loadData")
const installs: any = ref({})
const pageExtension = (name: string) => {
    if (installs.value[name]) {
        return
    }
    window.ipcRenderer?.send('pageExtension', name);
}
window.ipcRenderer.on("progress", (_: any, res: any) => {
    if (res.percent >= 101) {
        setTimeout(() => {
            delete installs.value[res.name]
            if (res.running === true) {
                pageExtension(res.name)
            }
        }, 500)
        window.ipcRenderer.send("loadData")
    } else if (res.percent == -1) {
        delete installs.value[res.name]
    } else {
        res.finish = prettyBytes(res.finish, { space: false })
        res.total = prettyBytes(res.total, { space: false })
        installs.value[res.name] = res
    }
})
const updaterProgress: any = ref({})
window.ipcRenderer.on("updaterProgress", (_: any, res: any) => {
    updaterProgress.value = res
})
const pageSetting = () => {
    window.ipcRenderer?.send('pageSetting');
}
</script>
<template>
    <div class="h-full w-full flex">
        <div class="w-20 py-2 flex flex-col items-center gap-4">
            <a-anchor line-less :change-hash="false" scroll-container="#scrollbar"
                class="!w-full text-center flex-1 h-0">
                <a-anchor-link v-for="(item0, index0) in data" :key="`anchor-${index0}`" :href="`#${index0}`">
                    {{ $t(`keywords.${item0.title}`) }}
                </a-anchor-link>
            </a-anchor>
            <a-button shape="circle" type="text" status="text" @click="pageSetting">
                <template #icon>
                    <IconSettings :size="20" />
                </template>
            </a-button>
        </div>
        <div class="flex-1 w-0 h-full border-l border-t rounded-tl-xl">
            <a-scrollbar class="overflow-y-auto w-full content-h" id="scrollbar">
                <div class="px-4 py-6">
                    <div v-for="(item0, index0) in data" :key="`items-${index0}`">
                        <div class="mb-4 font-mono font-bold text-nowrap" :id="`${index0}`">{{
                            $t(`keywords.${item0.title}`) }}
                        </div>
                        <div
                            class="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 mb-4">
                            <router-link
                                :to="`/extension?name=${item.name}&version=${item.version}&installed=${item.installed}&upgradable=${item.upgradable}&star=${item.star}`"
                                v-for="(item, index) in item0.children" :key="`item-${index0}-${index}`">
                                <a-card hoverable>
                                    <div v-if="installs[item.name] != undefined"
                                        class="w-full h-full progress-bg absolute top-0 left-0 rounded-sm z-1 flex flex-col">
                                        <div class="text-nowrap	flex-1 font-bold flex items-center justify-center ">
                                            <div v-if="installs[item.name].percent > 0" class="text-green-500">
                                                {{ installs[item.name].finish }} / {{ installs[item.name].total }}
                                            </div>
                                            <IconSync v-else class="text-lg" spin />
                                        </div>
                                        <a-progress :percent="installs[item.name].percent / 100" :show-text="false" />
                                    </div>
                                    <div class="flex items-center gap-4" id="111">
                                        <div class="absolute top-1 right-1 z-1">
                                            <a-tag v-if="!item.installed" color="gray"
                                                class="!h-5 flex items-start !text-xs">
                                                {{ $t('home.unerected') }}
                                            </a-tag>
                                            <a-tag v-else-if="item.upgradable" color="red"
                                                class="!h-5 flex items-start !text-xs">
                                                {{ $t('home.new_version') }}
                                            </a-tag>
                                        </div>
                                        <img v-if="item.installed" class="w-11 h-11"
                                            :src="`atom://${item.name}/${item.version}/dist/favicon.png`"
                                            alt="non-copyable" />
                                        <img v-else class="w-11 h-11"
                                            :src="`https://unpkg.com/@toy-kit/${item.name}@${item.version}/dist/favicon.png`"
                                            alt="non-copyable" />
                                        <div class="flex-1 w-0">
                                            <div class="truncate font-bold">{{ $t(`${item.name}.title`) }}</div>
                                            <div class="truncate text-sm mt-2">{{ $t(`${item.name}.description`) }}
                                            </div>
                                        </div>
                                    </div>
                                </a-card>
                            </router-link>
                        </div>
                    </div>
                </div>
            </a-scrollbar>
        </div>
    </div>
</template>